<template>
  <div class="">
    <div ref="box" style="width:450px; height:200px" />
  </div>
</template>

<script>
import * as echarts from 'echarts'
export default {
  mounted() {
    const myChart = echarts.init(this.$refs.box)
    var option = {
      title: [
        // 第一个球
        {
          subtextStyle: {
            color: '#000',
            fontSize: '16px',
            fontWeight: '700'
          },
          subtext: '运输中 53',
          left: '30%',
          top: '82%',
          textAlign: 'center'
        },
        // 第二个球
        {
          subtextStyle: {
            color: '#000',
            fontSize: '16px',
            fontWeight: '700'
          },
          subtext: '派送中 34',
          left: '80%',
          top: '82%',
          textAlign: 'center'
        }

      ],
      series: [
        // 第一个球
        {
          type: 'liquidFill',
          radius: '60%',
          center: ['30%', '50%'],
          data: [0.42],
          itemStyle: {
            color: '#e35d3e',
            shadowBlur: 20
          },
          outline: {
            borderDistance: 4,
            color: '#156ACF',
            itemStyle: {
              borderWidth: 2,
              borderColor: '#e67961'
            }
          },
          backgroundStyle: {
            color: '#ffe5e0'
          },
          label: {
            fontSize: 16,
            color: 'black',
            fontWeight: '400',
            insideColor: '#000'
          }
        },
        // 第二个球
        {
          type: 'liquidFill',
          radius: '60%',
          center: ['80%', '50%'],
          data: [0.31],
          itemStyle: {
            color: '#ffc45e',
            shadowBlur: 20
          },
          outline: {
            borderDistance: 4,
            color: 'red',
            itemStyle: {
              borderWidth: 2,
              // 边框线颜色
              borderColor: '#fece7a'
            }
          },
          backgroundStyle: {
            color: '#fff1d9'
          },
          label: {
            fontSize: 16,
            color: 'black',
            fontWeight: '400',
            insideColor: '#000'
          }
        }

      ]

    }
    myChart.setOption(option)
  }
}
</script>

<style>

</style>
